<template>
    <i-popup v-model="modelValue">
        <view class="wrapper">
            <view class="head">
                <view class="steps-wrap">
                    <view class="step">
                        <view v-for="(item, index) in steps" :key="index" :class="['step-item', stepClass(index)]">
                            <template v-if="stepClass(index) === 'underway'">
                                <image class="icon-image" src="/static/images/icon/writing-fluently.svg" />
                            </template>
                        </view>
                    </view>
                    <view class="step-num">{{ petStore.currentStep + 1 }}/{{ petStore.stepCount }}</view>
                </view>

                <view class="clear" @click="petStore.clearAddPetDetail">
                    <uni-icons type="trash" size="24rpx" color="#4AB8B0" />
                    清空
                </view>
            </view>
            <swiper :current="petStore.add.step" class="swiper" :style="swiperHeightStyle" @change="onUpdateSwiper">
                <swiper-item v-for="item in steps" :key="item.key" @touchmove.stop="false">
                    <template v-if="item.key === MODULES_TYPE.STEP_SELECT_PET_CATEGORY_TYPE">
                        <StepSPCT @next="onNextStep" />
                    </template>
                    <template v-if="item.key === MODULES_TYPE.STEP_SELECT_PET_BREED">
                        <StepSPB @next="onNextStep" @pre="onPreStep" />
                    </template>
                    <template v-if="item.key === MODULES_TYPE.STEP_EDIT_PET_DETAILS">
                        <StepEPD @next="onNextStep" @pre="onPreStep" />
                    </template>
                    <template v-if="item.key === MODULES_TYPE.STEP_COMPLETE">
                        <StepC @done="onDone" @pre="onPreStep" />
                    </template>
                </swiper-item>
            </swiper>
        </view>
    </i-popup>
</template>

<script setup lang="ts">
import StepSPCT from "./modules/step-select-pet-category-type/index.vue";
import StepSPB from "./modules/step-select-pet-breed/index.vue";
import StepEPD from "./modules/step-edit-pet-details/index.vue";
import StepC from "./modules/step-complete/index.vue";
import { STEP_PET_MODULES_TYPE as MODULES_TYPE } from "@/store";

import { useStep } from "./hooks";

const modelValue = defineModel({
    type: Boolean,
    default: false
});

const { petStore, steps, swiperHeightStyle, stepClass, onNextStep, onPreStep, onUpdateSwiper } = useStep();

const onDone = () => {
    modelValue.value = false;
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
